<!DOCTYPE HTML>
<html>
<head>
  <title>JSONEditor | Switch mode</title>

  <!-- when using the mode "code", it's important to specify charset utf-8 -->
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <link href="css/app.css" rel="stylesheet" type="text/css">
  <link href="css/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="js/jsoneditor.js"></script>



  <style type="text/css">


    code {
      background-color: #f5f5f5;
    }
	
	#codeEditor {
      width: 548px;
      height: 460px;
    }
	
	#treeEditor {
      width: 548px;
      height: 460px;
    }
  </style>
</head>
<body>

<div id="auto">
  <div id="contents">
    <div id="codeEditor"></div>
	
	<div id="splitter">
      <div id="buttons">
        <div>
          <button id="toTree" class="convert" title="Copy code to tree editor (Ctrl + &gt;)" onclick="toTree();">
            <div class="convert-right"></div>
          </button>
        </div>
        <div>
          <button id="toJSON" class="convert" title="Copy tree to code editor (Ctrl + &lt;)" onclick="toJson()">
            <div class="convert-left"></div>
          </button>
        </div>
      </div>
      <div style="height: 382px; line-height: 382px;" title="Drag left or right to change the width of the panels" id="drag">⋮</div>
    </div>
	
	<div id="treeEditor"></div>
  </div>
</div>

<script>
  var codeEditor = null;
  var treeEditor = null;
  var json = {
		"array": [1, 2, 3],
		"boolean": true,
		"null": null,
		"number": 123,
		"object": {"a": "b", "c": "d"},
		"string": "Hello World"
	  };

  function initJsonEditorTreeMode(container,defaultModel,jsonObj){
	  //var container = document.getElementById('jsoneditor_code');

	  var options = {
		mode: defaultModel,
		modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
		onError: function (err) {
		  alert(err.toString());
		},
		onModeChange: function (newMode, oldMode) {
		  console.log('Mode switched from', oldMode, 'to', newMode);
		}
	  };

	  

	  var editor = new JSONEditor(container, options, jsonObj);
	  return editor;
  }
  codeEditor = initJsonEditorTreeMode(document.getElementById('codeEditor'),"code",json);
  treeEditor = initJsonEditorTreeMode(document.getElementById('treeEditor'),"tree",json);
  
  function toTree(){
	treeEditor.set(codeEditor.get());
  }
  function toJson(){
	codeEditor.set(treeEditor.get());
  }

</script>

</body>
</html>
